第8章 文本处理能力

line-height的另一个朋友font-size

vertical-align百分比值属性是相对于line-height计算，line-height的数值属性和百分比值都是相对于font-size计算。

font-size和vertical-align的隐秘故事

See the Pen 图标垂直居中 by whjin (@whjin) on CodePen.

原理：内联元素默认基线对齐，图片的基线是图片的下边缘，文字内容的基线是字符x下边缘。图片下边缘和文字字形边缘往上位置对齐。通过vertical-align:25%声明让图片的下边缘和中文汉字的中心线对齐。

理解font-size与ex、em和rem的关系

总结：1em的计算值等同当前元素所在的font-size计算值。

理解font-size的关键字属性值

  1. 相对尺寸关键字。larger、smaller
  2. 绝对尺寸关键字。xx-large、x-large、large、medium、small、x-small、xx-small

font-size:0与文本的隐藏

隐藏logo对应元素内的文字，除了text-indent缩进隐藏外，还可以使用以下方法：

.logo {
    font-size: 0;
}

字体属性家族font-family

font-family支持两类属性值，一类是字体名，一类是字体族。

字体族：

了解衬线字体和无衬线字体

字体分衬线字体和无衬线字体。

等宽字体的实践价值

1. 等宽字体与代码呈现

2. 等宽字体与图形呈现

3. ch单位与等宽字体布局

1ch表示一个0字符的宽度。

中文字体和英文名称

Windows常见内置中文字体和对应英文名称。

字体中文名 字体英文名
宋体 SimSun
黑体 SimHei
微软雅黑 Microsoft Yahei
微软正黑体 Microsoft JhengHei
楷体 KaiTi
新宋体 NSimSun
仿宋 FangSong

一些补充说明

微软正黑体是一款全面支持ClearType技术的TrueType无衬线字体，用于繁体中文系统。

字体家族其他成员

font-weight

font-style

font-variant

font属性

缩写的font属性

完整语法：[font-style||font-variant||font-weight]?font-size[/line-height]?font-family，（font-size和font-family是必需项）。

font缩写会破坏部分属性的继承性，必须要带上font-family。利用@font face规则将字体列表重定义为一个字体。

使用关键字值得font属性

font属性支持关键字属性值，语法：font:caption|icon|menu|message-box|small-caption|status-bar

使用关键字作为属性值必须是独立的，不能添加font-family或font-size等。

font关键字属性值的应用价值

//推荐使用
html {font: menu;}
body {font-size: 16px;}

html {font: small-caption;}
body {font-size: 16px;}

html {font: status-bar;}
body {font-size: 16px;}

@font face规则

@font face的本质是变量

@font face的本质上就是一个定义字体或字体集的变量，包括字体重命名、默认字体样式设置等。

@font face规则支持的CSS属性有font-family、src、font-style、font-weight、unicode-range、font-variant、font-stretch和font-feature-settings。

@font-face {
    font-family: 'example';
    src: url("example.ttf");
    font-style: normal;
    font-weight: normal;
    unicode-range: U+0025-00FF;
    font-variant: small-caps;//忽略
    font-stretch: expanded;//忽略
    font-feature-settings: "ligal" on;//忽略
}

1. font-family

@font-face {
    font-family: '$';
    src: url("example.ttf");
}

2. src

如果是使用系统字体，则使用local()功能符；如果使用外链字体，则使用url()功能符。

@font-face {
    font-family: ICON;
    src: url("icon.eot") format('eot');
    src: url("icon.eot?#iefix") format("embedded-opentype"),
    url("icon.woff2") format("woff2"),
    url("icon.woff") format("woff"),
    url("icon.ttf") format("truetype"),
    url("icon.svg#icon") format("svg");
    font-style: normal;
    font-weight: normal;
}

推荐使用方法：

@font-face {
    font-family: ICON;
    src: url("icon.eot") format('eot');
    src: local('☺'),
    url("icon.woff2") format("woff2"),
    url("icon.woff") format("woff"),
    url("icon.ttf") format("truetype");
}

3. font-style

4. font-weight

5. unicode-range

unicode-range的作用是可以让特定的字符或特定范围的字符使用指定的字体。

@font face与字体图标技术

.icon {
    font-family: ICON;
}

.icon-microphone:before {
    content: '\1f3a4';
}

文本的控制

text-indent与内联元素缩进

text-indent负值隐藏文本内容。

See the Pen text-indent与纯文本对齐布局 by whjin (@whjin) on CodePen.

  1. text-indent仅对第一行内联盒子内容有效；
  2. 非替换元素以外的display计算值为inline的内联元素设置text-indent值无效，如果计算值是inline-block/inline-table则会生效。因此，如果父级块状元素设置了text-indent属性值，子inline-block/inline-table需要设置text-indent:0重置。
  3. input标签按钮text-indent值无效。
  4. button标签按钮text-indent值有效，但存在兼容性问题。
  5. input和textarea输入框的text-indent在低版本IE下有兼容性问题。

letter-spacing与字符间距

letter-spacing特性：

  1. 继承性；
  2. 默认值是normal不是0。
  3. 支持负值，且值足够大时会让字符形成重叠，甚至反向排列。
  4. 第一行都会保留至少一个字符。
  5. 支持小数值。
  6. 暂时不支持百分比值。

word-spacing与单词间距

word-spacing和letter-spacing共同特性：

  1. 具有继承性；
  2. 默认值都是normal。
  3. 都支持负值，都可以让字符重叠，不适合使用word-spacing来清除空白间隙。
  4. 都支持小数值。
  5. 间隔算法都会受到text-align:jusitify两端对齐的影响。

两者差异：

letter-spacing作用域所有字符，word-spacing仅作用于空格字符（增加空格的间隙宽度）。

了解word-break和word-wrap的区别

word-break属性语法：

word-wrap语法：

word-break:break-all的作用是所有的都换行，而word-wrap:break-word则是如果这一行文字有了可换行的点（如空格或CJK等），就在这些换行点换行。

See the Pen word-break:break-all和word-wrap:break-word的区别 by whjin (@whjin) on CodePen.

white-space与换行和空格的控制

1. white-space的处理模型

white-space属性声明了如何处理元素内的空白字符，包括空格键Space、回车键Enter、制表符Tab产生的空白。white-space可以决定图文内容是否在一行显示（回车键是否生效），是否显示大段连续空白（空格是否生效）等。

其属性值包括：

white-space的功能有3个维度，分别是：是否合并空白字符、是否合并换行符、文本是否自动换行。

white-space不同属性值功能示意

属性 换行 空格和制表 文本环绕
normal 合并 合并 环绕
nowrap 合并 合并 不环绕
pre 保留 保留 不环绕
pre-wrap 保留 保留 环绕
pre-line 保留 合并 环绕

2. white-space与最大可用宽度

当white-space设置为nowrap时，元素的宽度表现为最大可用宽度，换行符和一些空格全部合并，文本一行显示。

  1. 包含块尺寸大小处理。绝对定位和inline-block元素都具有包裹性，当文本内容宽度超过包含块宽度时，就会发生文本环绕现象。
  2. 单行文字溢出...效果。text-overflow:ellipsis;文字内容超出打点效果离不开white-space:nowrap;声明。
  3. 水平列表切换效果。如果列表的数目是不固定的，使用white-space:nowrap;使列表一行显示。

text-align与元素对齐

text-align:justify想要实现两端对齐布局效果，需要满足两点：一是有分隔点，如空格；二是要超过一行，此时不是最后一行内容会两端对齐。

text-align-last属性，可以规定最后一行内联内容的排列方式。

.justify {
    text-align-last: justify;
}

这个方法存在兼容性问题。

如何解决text-decoration下划线和文本重叠的问题

对于纯内联元素，垂直方向的padding属性和border属性对原来的布局定位等没有任何影响。

使用border-bottom模拟text-decoration下划线解决文本重叠的问题

text-transform字符大小写

text-transform是为英文字符设计，全大写text-transform:uppercase，全小写text-transform:lowercase

1. 场景一：身份证输入

2. 场景二：验证码输入

了解:first-letter/:first-line伪元素

深入:first-letter伪元素及其实例

1. ::first-letter伪元素生效的前提

2. ::first-letter伪元素可以生效的CSS属性

字符被选做::first-letter伪元素，只有一部分有效：

3. ::first-letter伪元素特点

  1. 支持部分display属性值标签嵌套。::first-letter伪元素获取可以跨标签，不仅能选择匿名内联盒子，还能透过层层标签进行选择。

  2. 颜色等权重总是多了一层。::first-letter伪元素作为子元素存在，对于color继承属性，子元素的CSS设置一定比父元素的级别要高，即使使用了!important，子元素会先继承，然后再应用自身设置。

     p:first-letter {
     color: #cd0000; /*第一个字符的颜色是red*/
 }

 p > span {
     color: blue !important;
 }
 <p><span>第一个</span>字符会不会变成红色？</p>

    4. ::first-letter伪元素实际应用

     <p class="price">￥399</p>
 .price:first-letter {
     margin-right: 5px;
     font-size: xx-large;
     vertical-align: -2px;
 }

:first-line伪元素